<template>
    <div id="product">
    <magic-header :titleName="titleName" class="header"></magic-header>
        <section>
            <div class="title">{{title}}</div>
            <div class="detail">
                <span class="time">{{time}}</span>
                <span class="shopName">{{shopName}}</span>
            </div>
        </section>
        <section>
            <div class="content" v-html="content"></div>
        </section>
    </div>
</template>
<script>
import magicHeader from "components/magicHeader";
export default {
  components: {
    magicHeader
  },
  data() {
    return {
      content: "",
      title: "",
      time: "",
      shopName: "",
      titleName: "爱车频道"
    };
  },
  created() {
    this.title = this.$route.params.title;
    this.content = this.$route.params.content;
    this.time = this.$route.params.time;
    this.shopName = this.$route.params.shopName;
  }
};
</script>
<style lang="scss">
#likeCar {
  .title {
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
  }
  .detail {
    display: flex;
    margin-top: 10px;
    padding: 10px;
    span {
      flex: 1;
      text-align: center;
      &.time {
      }
      &.shopName {
        color: #5e92d3;
      }
    }
  }
}
</style>
